<template>
  <el-form  ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top" v-loading="isLoading">
    <el-row :gutter="30">

			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.id' prop='id'>
					<el-input v-model.trim='formInline.id' clearable :placeholder='prompt?.id' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.projectId' prop='projectId'>
					<el-input v-model.trim='formInline.projectId' clearable :placeholder='prompt?.projectId' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.projectName' prop='projectName'>
					<el-input v-model.trim='formInline.projectName' clearable :placeholder='prompt?.projectName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityName' prop='unityName'>
					<el-input v-model.trim='formInline.unityName' clearable :placeholder='prompt?.unityName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.productName' prop='productName'>
					<el-input v-model.trim='formInline.productName' clearable :placeholder='prompt?.productName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.place' prop='place'>
					<el-input v-model.trim='formInline.place' clearable :placeholder='prompt?.place' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.deviceId' prop='deviceId'>
					<el-input v-model.trim='formInline.deviceId' clearable :placeholder='prompt?.deviceId' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.deviceSN' prop='deviceSN'>
					<el-input v-model.trim='formInline.deviceSN' clearable :placeholder='prompt?.deviceSN' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.alarmTitle' prop='alarmTitle'>
					<el-input v-model.trim='formInline.alarmTitle' clearable :placeholder='prompt?.alarmTitle' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.confirm' prop='confirm'>
					<el-input v-model.trim='formInline.confirm' clearable :placeholder='prompt?.confirm' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.alarmType' prop='alarmType'>
					<el-input v-model.trim='formInline.alarmType' clearable :placeholder='prompt?.alarmType' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.dealStatus' prop='dealStatus'>
					<el-input v-model.trim='formInline.dealStatus' clearable :placeholder='prompt?.dealStatus' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.createdAt' prop='createdAt'>
					<el-input v-model.trim='formInline.createdAt' clearable :placeholder='prompt?.createdAt' />
				</el-form-item>
			</re-col>    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref,reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles,prompt } from './index';
import type { infoType } from '@/api/manage/projectManagementes/alarm-log/index';
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
projectId: [{ required: true, message: prompt?.projectId, trigger: 'blur' },],
projectName: [{ required: true, message: prompt?.projectName, trigger: 'blur' },],
unityName: [{ required: true, message: prompt?.unityName, trigger: 'blur' },],
productName: [{ required: true, message: prompt?.productName, trigger: 'blur' },],
place: [{ required: true, message: prompt?.place, trigger: 'blur' },],
deviceId: [{ required: true, message: prompt?.deviceId, trigger: 'blur' },],
deviceSN: [{ required: true, message: prompt?.deviceSN, trigger: 'blur' },],
alarmTitle: [{ required: true, message: prompt?.alarmTitle, trigger: 'blur' },],
confirm: [{ required: true, message: prompt?.confirm, trigger: 'blur' },],
alarmType: [{ required: true, message: prompt?.alarmType, trigger: 'blur' },],
dealStatus: [{ required: true, message: prompt?.dealStatus, trigger: 'blur' },],
createdAt: [{ required: true, message: prompt?.createdAt, trigger: 'blur' },],
});
const ruleFormRef = ref();
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
